<template>
  <div>
    <div class="row mb-1">
      <label class="control-label col-3 text-end"> 企业* </label>
      <div class="col-9">
        <my-select-customer
          :minId="0"
          :status="1"
          :customerId.sync="localCustomerId"
        ></my-select-customer>
      </div>
    </div>
    <div class="row mb-1" v-if="costCenters.length > 0">
      <label class="col-3 control-label text-end">成本中心</label>
      <div class="col-9">
        <select class="form-select" v-model="localCostCenter">
          <option value="">请选择</option>
          <option
            :value="info.name"
            :key="`cc` + info.id"
            v-for="info in costCenters"
          >
            {{ info.name }}
          </option>
        </select>
      </div>
    </div>
    <div class="row mb-1" v-if="projectNames.length > 0">
      <label class="col-3 control-label text-end"
        >项目名称{{ projectNames.length }}</label
      >
      <div class="col-9">
        <select class="form-select" v-model="localProjectName">
          <option value="">请选择</option>
          <option
            :value="info.name"
            :key="`proj` + info.id"
            v-for="info in projectNames"
          >
            {{ info.name }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
import MySelectCustomer from "./my-select2-customer.vue";

import { searchNotesByCustomer } from "@/api/customer.js";

export default {
  props: {
    customerId: 0,
    costCenter: "",
    projectName: "",
  },
  components: {
    MySelectCustomer,
  },
  data() {
    return {
      costCenters: [],
      projectNames: [],

      localCostCenter: this.projectName,
      localProjectName: this.projectName,
      localCustomerId: this.customerId,
    };
  },
  watch: {
    customerId: function (newVal) {
      this.localCustomerId = newVal;
      this.getCostCenters();
    },
    costCenter: function (newVal) {
      // console.log(newVal)
      this.localCostCenter = newVal;
    },
    projectName: function (newVal) {
      // console.log(newVal)
      this.localProjectName = newVal;
    },
    localCustomerId: function (newVal) {
      this.$emit("update:customerId", newVal);
    },
    localCostCenter: function (newVal) {
      // console.log(newVal)
      this.$emit("update:costCenter", newVal);
    },
    localProjectName: function (newVal) {
      // console.log(newVal)
      this.$emit("update:projectName", newVal);
    },
  },
  methods: {
    getCostCenters: function () {
      this.localCostCenter = "";
      this.localProjectName = "";

      if (this.customerId < 1) return;

      searchNotesByCustomer(this.customerId, (v) => {
        this.costCenters.splice(0);
        this.projectNames.splice(0);
        for (const info of v) {
          if (info.noteType === 100) {
            this.costCenters.push(info);
          } else if (info.noteType === 200) {
            this.projectNames.push(info);
          }
        }
      });
    },
  },
};
</script>